<template>
  <div :id="echarts" :style="getheight" class="chart"></div>
</template>
<script>
export default {
  name: 'github',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    height: {
      type: Number,
      default: 140
    },
    isSmooth: {
      type: Boolean,
      default: true
    },
    isArea: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: Array,
      default: () => ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196027']
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        grid: { top: '30px', left: '30px', right: '30px', bottom: '30px' },
        visualMap: {
          min: 0,
          max: 10000,
          inRange: {
            color: this.color
          },
          show: false
        },
        backgroundColor: '#fff',
        calendar: {
          cellSize: [14, 14],
          range: [],
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 4
          },
          splitLine: {
            show: false
          },
          yearLabel: { show: false }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: []
        }
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      this.option.calendar.range = [
        this.getVirtulData()['thatday'],
        this.getVirtulData()['today']
      ]
      this.option.series.data = this.getVirtulData()['data']
      chartFactor.setOption(this.option, true)
    },
    getVirtulData() {
      var today = this.$echarts.number.parseDate(new Date())
      var dayTime = 3600 * 24 * 1000
      var thatday = today - dayTime * 365

      var data = []
      for (var time = thatday; time < today; time += dayTime) {
        data.push([
          this.$echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 10000)
        ])
      }
      return {
        data,
        today: this.$echarts.format.formatTime('yyyy-MM-dd', today),
        thatday: this.$echarts.format.formatTime('yyyy-MM-dd', thatday)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
}
</style>